<template>
  <view class="user-info-page">
    <!-- 页面标题 -->
    <view class="page-title">我的推荐官信息</view>
    
    <!-- 用户信息卡片 -->
    <view class="info-card" v-if="userInfo.invite_user">
      <!-- 头像区域 -->
      <view class="avatar-container">
        <image 
          class="avatar" 
          :src="userInfo.invite_user.avatar" 
          mode="widthFix"
          alt="用户头像"
        ></image>
      </view>
      
      <!-- 信息列表 -->
      <view class="info-list">
        <view class="info-item">
          <view class="info-label">ID</view>
          <view class="info-value">{{ userInfo.invite_user.id }}</view>
        </view>
        
        <view class="info-item">
          <view class="info-label">手机号</view>
          <view class="info-value">{{ formatMobile(userInfo.invite_user.mobile) }}</view>
        </view>
        
        <view class="info-item">
          <view class="info-label">姓名</view>
          <view class="info-value">{{ userInfo.name }}</view>
        </view>
        
        <view class="info-item">
          <view class="info-label">昵称</view>
          <view class="info-value">{{ userInfo.invite_user.nickname }}</view>
        </view>
      </view>
    </view>
    
    <!-- 换绑按钮 -->
    <button class="change-btn" @click="handleChangeBind">更换推荐官</button>
  </view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js'
export default {
  data() {
    return {
      userInfo: {
        "id": "1",
        "mobile": "15999999999",
        "name": "李阳",
        "nickname": "111",
        "avatar": "/image/avatar.jpg"
      }
    };
  },
  onLoad() {
	this.getUserInfo()
  },
  methods: {
	  getUserInfo() {
	  	request({
	  		url: 'user/center',
	  		method: 'get',
	  		data: {
	  		}
	  	}).then(res => {
	  		console.log(res)
	  		if(res.status==200){
	  			this.userInfo = res.data
	  		}
	  	})
	  
	  },
	  
	  
    // 格式化手机号，中间用*代替
    formatMobile(mobile) {
      if (!mobile) return '';
      return mobile.replace(/^(\d{3})(\d{4})(\d{4})$/, '$1****$3');
    },
    
    // 处理换绑事件
    handleChangeBind() {
		let that = this
      // 这里可以添加换绑手机号的逻辑
      uni.showModal({
      	title:'输入推荐官id',
		editable:true,
		success: function (res) {
				if (res.confirm) {
					console.log('用户点击确定');
					if(res.content){
						that.bindUser(res.content)
					}
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
      })
      // 实际应用中可以导航到换绑页面
      // uni.navigateTo({
      //   url: '/pages/changeMobile/changeMobile'
      // });
    },
	bindUser(id) {
		request({
			url: 'user/bind-up',
			method: 'post',
			data: {
				p_uid:id
			}
		}).then(res => {
			console.log(res)
			if(res.status==200){
				uni.showToast({
					title:'绑定成功',
					icon:'none'
				})
				this.getUserInfo()
			}else{
				
				uni.showToast({
					title:res.message,
					icon:'none'
				})
				console.log(1111)
			}
		})
	}
  },
};
</script>

<style scoped>
.user-info-page {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  padding: 30rpx 0;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}

.info-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 40rpx;
}

.avatar-container {
  display: flex;
  justify-content: center;
  margin-bottom: 40rpx;
}

.avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  border: 4rpx solid #eee;
}

.info-list {
  border-top: 2rpx solid #f0f0f0;
}

.info-item {
  display: flex;
  padding: 28rpx 0;
  border-bottom: 2rpx solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  width: 200rpx;
  font-size: 30rpx;
  color: #666;
}

.info-value {
  flex: 1;
  font-size: 30rpx;
  color: #333;
  text-align: right;
}

.change-btn {
  width: 90%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #007aff;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
